<template>
  <page-header-wrapper>
    <global-search :list="searchList" @search="handleSearch(false, $event)" @reset="handleSearch(true, $event)" />
    <a-card :bordered="false">
      <s-table
        ref="table"
        bordered
        :rowKey="(record) => record.ID"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: '100%', y: 500 }"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="description" slot-scope="text">
          <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
        </span>
        <span slot="date" slot-scope="text">{{ text | moment('YYYY-MM-DD') }}</span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

  <script>
  import { STable, Ellipsis } from '@/components'
  import { getUrgeRecordList } from '@/api/property'
  const columns = [
    {
      title: '序号',
      align: 'center',
      width: 80,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '客户编号',
      align: 'center',
      dataIndex: 'KHBH',
      width: 180
    },
    {
      title: '催缴编号',
      align: 'center',
      dataIndex: 'CJNO',
      width: 180
    },
    {
      title: '客户名称',
      align: 'center',
      dataIndex: 'KHMC',
      width: 100
    },
    {
      title: '房屋信息',
      align: 'center',
      width: 180,
      dataIndex: 'FWXX',
      scopedSlots: { customRender: 'description' }
    },
    {
      title: '欠租开始',
      align: 'center',
      width: 120,
      dataIndex: 'QZKS',
      scopedSlots: { customRender: 'date' }
    },
    {
      title: '欠租结束',
      align: 'center',
      width: 120,
      dataIndex: 'QZJS',
      scopedSlots: { customRender: 'date' }
    },
    {
      title: '累计欠租',
      align: 'center',
      width: 120,
      dataIndex: 'LJQZ'
    },
    {
      title: '联系电话',
      align: 'center',
      width: 160,
      dataIndex: 'DXDH'
    },
    {
      title: '短信内容',
      align: 'center',
      width: 180,
      dataIndex: 'DXNR',
      scopedSlots: { customRender: 'description' }
    },
    {
      title: '发送时间',
      align: 'center',
      width: 120,
      dataIndex: 'FSSJ',
      scopedSlots: { customRender: 'date' }
    },
    {
      title: '发送人',
      align: 'center',
      width: 160,
      dataIndex: 'FSR'
    },
    {
      title: '催缴类型',
      align: 'center',
      width: 120,
      dataIndex: 'DXLX',
      fixed: 'right'
    }
  ]
  export default {
    name: 'PropertyParameterList',
    components: {
      STable,
      Ellipsis
    },
    data () {
      this.columns = columns
      return {
        searchList: [
          {
            label: '客户编号',
            fields: 'KHBH',
            type: 'input',
            props: {
              placeholder: '请输入客户编号'
            }
          },
          {
            label: '催缴编号',
            fields: 'CJNO',
            type: 'input',
            props: {
              placeholder: '请输入催缴编号'
            }
          },
          {
            label: '客户名称',
            fields: 'KHMC',
            type: 'input',
            props: {
              placeholder: '请输入客户名称'
            }
          },
          {
            label: '联系电话',
            fields: 'DXDH',
            type: 'input',
            props: {
              placeholder: '请输入联系电话'
            }
          },
          {
            label: '欠租开始',
            fields: 'QZKS',
            type: 'date',
            props: {
              placeholder: '请选择欠租开始',
              valueFormat: 'YYYY-MM-DD'
            }
          },
          {
            label: '欠租结束',
            fields: 'QZJS',
            type: 'date',
            props: {
              placeholder: '请选择欠租结束',
              valueFormat: 'YYYY-MM-DD'
            }
          },

          {
            label: '发送时间',
            fields: 'FSSJ',
            type: 'date',
            props: {
              placeholder: '请选择发送时间',
              valueFormat: 'YYYY-MM-DD'
            }
          },
          {
            label: '发送人',
            fields: 'FSR',
            type: 'input',
            props: {
              placeholder: '请输入发送人'
            }
          }
        ],
        // 查询参数
        queryParam: {
          userid: this.$store.getters.userid,
          mode: '',
          strContent: {}
        },
        // 加载数据方法 必须为 Promise 对象
        loadData: (parameter) => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return getUrgeRecordList(requestParameters).then((res) => {
            return res
          })
        }
      }
    },
    methods: {
      handleSearch (refresh, strContent) {
        this.queryParam.strContent = strContent
        this.$refs.table.refresh(refresh)
      }
    }
  }
  </script>
